<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>在HTML页面中使用路由</title>
  </head>
  <body>
    <style>
      /* 设置页面基本样式 */
      #app {
        text-align: center;
      }
      .container {
        background-color: #55ff7f;
        margin-top: 20px;
        height: 100px;
      }
    </style>

    <div id="app">
      <!-- router-link组件用于创建导航链接 -->
      <router-link to="/home">首页</router-link>

      <!-- 使用custom修饰符和插槽创建自定义导航按钮 -->
      <router-link
        to="/list"
        custom
        v-slot="{ navigate }">
        <button
          @click="navigate"
          @keypress.enter="navigate">
          主要产品
        </button>
      </router-link>

      <router-link to="/about">技术服务</router-link>

      <!-- 另一个使用custom修饰符和插槽的导航按钮 -->
      <!-- 这里是v-slot是解构 navigate是一个函数，-->
      <!-- {
          navigate: () => router.push(to),
          href: '#/list',
          isActive: true
} -->
      <router-link
        to="/goods"
        custom
        v-slot="{ navigate }">
        <button
          @click="navigate"
          @keypress.after="navigate">
          团购商品
        </button>
      </router-link>

      <!-- router-view组件用于显示匹配路由的组件内容 -->
      <div class="container">
        <router-view></router-view>
      </div>
    </div>

    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!--引入Vue Router-->
    <script src="https://unpkg.com/vue-router@next"></script>

    <script>
      // 定义路由组件
      const home = { template: '<div>本公司是科技类型的公司！</div>' }
      const list = { template: '<div>这是主要产品list页面！</div>' }
      const about = { template: '<div>这是本公司的about页面</div>' }
      const goods = { template: '<div>这是团购商品goods页面！</div>' }

      // 定义路由配置
      const routes = [
        { path: '/home', component: home },
        { path: '/list', component: list },
        { path: '/about', component: about },
        { path: '/goods', component: goods }
      ]

      // 创建路由实例
      const router = VueRouter.createRouter({
        // 使用Hash模式
        history: VueRouter.createWebHashHistory(),
        // 路由配置
        routes
      })

      // 创建Vue应用实例
      const vm = Vue.createApp({})
      // 安装路由插件
      vm.use(router)
      // 挂载应用到DOM元素
      vm.mount('#app')
    </script>
  </body>
</html>
